@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .el-dropdown {
      top: 2px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #00B19D;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  </style>
}

<el-container>
  <el-aside width="140px">
    <el-tabs v-model="type" tab-position="left" style="height: 100%;" v-on:tab-click="btnNavClick">
      <el-tab-pane label="用户登录模板" name="login"></el-tab-pane>
      <el-tab-pane label="用户注册模板" name="register"></el-tab-pane>
      <el-tab-pane label="退出登录模板" name="logout"></el-tab-pane>
      <el-tab-pane label="重置密码模板" name="lostPassword"></el-tab-pane>
    </el-tabs>
  </el-aside>

  <el-container>
    <el-main>

      <el-alert type="info">
        标签：<strong>&lt;stl:login type="模板文件夹"&gt;&lt;/stl:login&gt;</strong>，如果希望自定义模板样式，可以点击代码编辑按钮然后修改模板代码。
      </el-alert>
      
      <div style="height: 10px"></div>
      
      <el-row>
        <el-col :span="8" v-for="templateInfo in templateInfoList" :key="templateInfo.id">
          <el-card style="margin-bottom: 15px; margin-right: 15px;" :body-style="{ padding: '0px', textAlign: 'center' }">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px;">
                模板文件夹：
                <el-tooltip class="item" effect="dark" :content="getCode(templateInfo)" placement="top">
                  <el-link type="primary">{{ templateInfo.name }}</el-link>
                </el-tooltip>
              </span>
            </div>
            <el-image 
              style="width: 100%; min-height: 120px; max-height:220px;"
              :src="getIconUrl(templateInfo)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
      
            <div style="cursor: pointer; height: 22px; overflow: hidden;font-size: 14px;margin: 5px 5px; padding-top: 5px">{{ templateInfo.description }}</div>
      
            <div class="bottom clearfix" style="margin: 5px 5px; padding-bottom: 15px;">
                
              <el-link type="primary" :underline="false" v-if="!templateInfo.publisher" v-on:click="btnEditClick(templateInfo.name)">设 置</el-link>
              <el-link type="primary" :underline="false" v-on:click="btnHtmlClick(templateInfo)">代码编辑</el-link>
              <el-link type="primary" :underline="false" v-on:click="btnPreviewClick(templateInfo)">预 览</el-link>
              <el-link type="primary" :underline="false"  v-if="!templateInfo.publisher" v-on:click="btnDeleteClick(templateInfo)">删 除</el-link>
      
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</el-container>

@section Scripts{
  <script src="/assets/login/js/templates.js" type="text/javascript"></script>
}